<template>
  <div>
    <el-button
      type="primary"
      v-show="!isEdit"
      @click="isEdit = true"
      icon="el-icon-s-tools"
      v-if="isPermissionsBtn('GoodsCategory_update')"
    >编辑商品类目</el-button>
    <el-container v-show="isEdit">
      <el-button
        type="primary"
        size="mini"
        @click="addCategory({id : 0 , level : 0})"
        icon="el-icon-circle-plus-outline"
        v-if="isPermissionsBtn('GoodsCategory_add')"
      >新增商品类目</el-button>
      <el-button @click="isEdit = false;category.categoryLevel = null" size="mini">取消</el-button>
    </el-container>
    <el-container>
      <el-container>
        <div class="custom-tree-container">
          <div class="block">
            <el-tree
              :data="data"
              node-key="id"
              :default-expand-all="false"
              :expand-on-click-node="false"
            >
              <span class="custom-tree-node tree-container" slot-scope="{ node, data }">
                <span>
                  <span>{{ node.label }}</span>
                </span>
                <span v-show="isEdit" style="margin:10px 0">
                  <el-button
                    type="text"
                    size="mini"
                    v-if="node.level <= 1"
                    @click="() => addCategory(node)"
                  >新增子类目</el-button>
                  <el-button @click="edit(node, data)" type="text" size="mini">编辑</el-button>
                  <el-button
                    @click="remove(node, data)"
                    type="text"
                    style="color:#f56c6c"
                    size="mini"
                  >删除</el-button>
                </span>
              </span>
            </el-tree>
          </div>
        </div>
      </el-container>
      <el-container>
        <AddTreeCategory
          v-if="isEdit && category.categoryLevel !== null&&isedict==2"
          ref="addRef"
          @cancel="category.categoryLevel = null"
          @submit="initData"
        />
        <addtreeCategory1
          v-if="isEdit && category.categoryLevel !== null&&isedict==1"
          ref="addRef1"
          @cancel="category.categoryLevel = null"
          @submit="initData"
        />
      </el-container>
    </el-container>
  </div>
</template>

<script>
let id = 1000;
import AddTreeCategory from "./AddTreeCategory";
import addtreeCategory1 from "./addtreeCategory1";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      isEdit: false,
      category: {
        categoryLevel: null //null 代表啥也不是 0一类目 1二级类目 2三级类目
      },
      data: [],
      isedict: 0
    };
  },
  mounted() {
    this.initData();
  },
   computed: {
    ...mapGetters(["isPermissionsBtn"])
  },
  methods: {
    initData() {
      this.category.categoryLevel = null;
      this.$service.getCategoryList(list => {
        this.data = list;
      });
    },
    addCategory(node) {
      console.log(node);
      let { level } = node;
      let parentId = (node.data && node.data.value) || 0;
      console.log(level);
      this.isedict = level == 0 ? 1 : 2;
      this.category.categoryLevel = level;
      this.$nextTick(() => {
        if (level == 0) {
          this.$refs.addRef1.init(level, parentId);
        } else {
          this.$refs.addRef.init(level, parentId);
        }
      });
    },

    remove(node, data) {
      console.log(1111, data.value, data);
      let param = {
        id: data.value
      };
      this.$confirm("此操作将永久删除该类目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$service.deleteCategory(param).then(res => {
            if (res.code == "00000") {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.initData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    edit(node, data) {
      console.log(node, data);
      let { level } = node;
      let parentId = (node.data && node.parent.data.value) || 0;
      let id = node.data.value;
      let name = (node.data && node.data.label) || "";
      this.isedict = level == 1 ? 1 : 2;
      let type = "edit"; //编辑写死了
      this.category.categoryLevel = level;
      this.$nextTick(() => {
        console.log(level);
        if (level == 1) {
          this.$refs.addRef1.init(level, parentId, name, type, id, data.image);
        } else {
          this.$refs.addRef.init(level, parentId, name, type, id, data.image);
        }
      });
    }
  },
  components: {
    AddTreeCategory,
    addtreeCategory1
  }
};
</script>

<style lang="scss" scoped>
.custom-tree-container {
  width: 80%;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.tree-container {
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>